<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>鲜花详情</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <link rel="stylesheet" type="text/css" href="css/route-detail.css">
    <style>
        .popLayer{
            position: absolute;
            display: none;
            left: 0;
            top: 0;
            width: 2000px;
            height: 1500px;
            z-index: 998;
            background: #dcdbdc;
            opacity: 0.6;
        }
        .login-box{
            display: none;
        }
        .yuan{
            color: #ff4848;
            font-size: 26px;
            font-weight: normal;
        }
    </style>

</head>

<body>
<!--引入头部-->
<div id="header"></div>
<!-- 详情 start -->
<div class="wrap">

    <!--输入地址 模态框start-->
    <div class="popLayer" id="popLayer">
    <!--页面背景灰色透明-->
</div>
    <div class="login-box" id="login-box">
        <div class="title">
            <img src="" alt="" width="56">
            <span>请输入送花地址</span>
        </div>
        <div class="login_inner">
            <!--登录错误提示消息-->
            <div id="errorMsg" class="alert alert-warning alert-dismissible">请详细核对地址</div>
            <form id="loginForm">
                <input type="hidden" name="action" value="address"/>
                <label>地址:</label><input name="address" type="text" aria-colspan="3" placeholder="请输入送花地址"/>
            </form>
            <div class="yuan">&yen;<span>199.00</span></div>
            <div class="reg" style="background-color: #ff6a00" id="sure"><a href="myorder.html" style="color: #0f0f0f">确认购买</a></div>
            <div class="reg" id="cancel">取消</div>
        </div>
    </div>
    <!--输入地址 模态框end-->
    <div class="bread_box">
        <a href="/">鲜花</a>
        <span> &gt;</span>
        <a href="#">玫瑰花</a><span> &gt;</span>
        <a href="#">蓝色妖姬</a>
    </div>
    <div class="prosum_box">
        <dl class="prosum_left">
            <dt>
                <img alt="" class="big_img"
                     src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg">
            </dt>
            <dd>
                <a class="up_img up_img_disable"></a>
                <a title="" class="little_img cur_img"
                   data-bigpic="xianhua_img/detail_big01.jpg">
                    <img src="xianhua_img/detail_big01.jpg">
                </a>
                <a title="" class="little_img "
                   data-bigpic="xianhua_img/detail_big02.jpg">
                    <img src="xianhua_img/detail_big02.jpg">
                </a>
                <a title="" class="little_img"
                   data-bigpic="xianhua_img/detail_big03.jpg">
                    <img src="xianhua_img/detail_big03.jpg">
                </a>
                <a title="" class="little_img"
                   data-bigpic="xianhua_img/detail_big04.jpg">
                    <img src="xianhua_img/detail_big04.jpg">
                </a>

                <a class="down_img down_img_disable" style="margin-bottom: 0;"></a>
            </dd>
        </dl>
        <div class="prosum_right">
            <p class="pros_title">致美丽的你--红玫瑰11枝，漫天星围绕，栀子叶0.5扎</p>
            <p class="hot">精选花材 彰显高端</p>
            <div class="pros_other">
                <p>类别：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鲜花编号：9010877</p>
                <p>材料：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;红玫瑰11枝，漫天星围绕，栀子叶0.5扎</p>
                <p>包装：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;外层浅灰紫/香芋紫人造纸，里层白色人造单面纸，白绿粗罗纹带</p>
                <p>花语：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;很爱你，想把你捧在手心，放在心里...11枝玫瑰，寓意一心一意，纵然途中万般风景，我眼里只有你</p>

            </div>
            <div class="pros_price">
                <p class="price"><strong>¥199.00</strong>
                <p class="collect">
						   <span>
								<a class="btn"><i class="glyphicon glyphicon-heart-empty"></i>加入购物车</a>
								<a class="btn already" disabled="disabled"><i
                                        class="glyphicon glyphicon-heart-empty"></i>已加入购物车</a>
                               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                               <a class="btn" id="shopping"><i class="glyphicon glyphicon-heart-empty"></i>立即购买</a>
							</span>
                </p>
            </div>
        </div>
    </div>
</div>
<!-- 详情 end -->


<!--引入头部-->
<div id="footer"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.3.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
<script type="text/javascript">
    document.getElementById("shopping").onclick = function () {
        var shopping1 = document.getElementById("popLayer");
        var shopping2 = document.getElementById("login-box");
        shopping1.style.display = "block";
        shopping2.style.display = "block";
    }
    document.getElementById("cancel").onclick = function () {
        var shopping1 = document.getElementById("popLayer");
        var shopping2 = document.getElementById("login-box");
        shopping1.style.display = "none";
        shopping2.style.display = "none";
    }
    document.getElementById("sure").onclick = function () {
        alert("购买成功！")
        location.href="myorder.html"
    }
</script>
<script>
    $(document).ready(function () {
        //焦点图效果
        //点击图片切换图片
        $('.little_img').on('mousemove', function () {
            $('.little_img').removeClass('cur_img');
            var big_pic = $(this).data('bigpic');
            $('.big_img').attr('src', big_pic);
            $(this).addClass('cur_img');
        });
        //上下切换
        var picindex = 0;
        var nextindex = 4;
        $('.down_img').on('click', function () {
            var num = $('.little_img').length;
            if ((nextindex + 1) <= num) {
                $('.little_img:eq(' + picindex + ')').hide();
                $('.little_img:eq(' + nextindex + ')').show();
                picindex = picindex + 1;
                nextindex = nextindex + 1;
            }
        });
        $('.up_img').on('click', function () {
            var num = $('.little_img').length;
            if (picindex > 0) {
                $('.little_img:eq(' + (nextindex - 1) + ')').hide();
                $('.little_img:eq(' + (picindex - 1) + ')').show();
                picindex = picindex - 1;
                nextindex = nextindex - 1;
            }
        });
        //自动播放
         var timer = setInterval("auto_play()", 3000);
    });

    //自动轮播方法
    function auto_play() {
        var cur_index = $('.prosum_left dd').find('a.cur_img').index();
        cur_index = cur_index - 1;
        var num = $('.little_img').length;
        var max_index = 3;
        if ((num - 1) < 3) {
            max_index = num - 1;
        }
        if (cur_index < max_index) {
            var next_index = cur_index + 1;
            var big_pic = $('.little_img:eq(' + next_index + ')').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(' + next_index + ')').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        } else {
            var big_pic = $('.little_img:eq(0)').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(0)').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        }
    }
</script>
</body>

</html>